<template>
  <div class="wrap">
    <div class="header">
      <div class="header_nav">
        <span>我的</span><img src="../assets/images/message.png" alt=""  @click="message()"/>
      </div>
      <div class="header_my">
        <div class="my_left">
          <img src="../assets/images/portrait.png" alt="" />
        </div>
        <div class="my_right">
          <div class="m_name">飞翔的小土豆</div>
          <div class="m_in">部门：企业部 岗位：练控员</div>
        </div>
      </div>
      <div class="header_info">
        <div class="info">
          <div class="num">280</div>
          <div class="info_content">我的里程</div>
        </div>
        <div class="info">
          <div class="num">783</div>
          <div class="info_content">我的工时</div>
        </div>
        <div class="info">
          <div class="num">2</div>
          <div class="info_content">我的收藏</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div
        @click="handleGoToPath(hoverData.name)"
        v-for="hoverData in hoverTabData"
        :key="hoverData.name"
      >
        <hover-tab
          :name="hoverData.name"
          :content="hoverData.content"
          :picsrc="hoverData.picsrc"
          :column = "column"
        />
      </div>
    </div>
    <div class="footer">
      <div class="f_main" @click="wineTesting">
				<div> <img class="icon" src="../../public/images/my/my_jiuce.png" alt="" /> <span>我的酒测</span></div>
        <img src="../assets/images/goback.png" alt="" />
      </div>
      <div class="f_main" @click="achievement">
        <div> <img class="icon" src="../../public/images/my/my_chengji.png" alt="" /> <span>我的成绩</span></div>
        <img src="../assets/images/goback.png" alt="" />
      </div>
      <div class="f_main">
        <div><img class="icon" src="../../public/images/my/my_xitong.png" alt="" /> <span> 我的里程</span></div>
        <img src="../assets/images/goback.png" alt="" />
      </div>
      <div class="f_main">
        <div> <img class="icon" src="../../public/images/my/my_xitong.png" alt="" /> <span>系统设置</span></div>
        <img src="../assets/images/goback.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
// import HeaderTop from '../components/HeaderTop'
import HoverTab from "./components/HoverTab";
export default {
  name: "me",
  data() {
    return {
      hoverTabData: [
        {
          name: "daiban",
          content: "我的待办",
          picsrc: "../../../images/my/daiban.png",
        },
        {
          name: "daka",
          content: "打卡",
          picsrc: "../../../images/my/daka.png",
        },
        {
          name: "qingjia",
          content: "请假",
          picsrc: "../../../images/my/qingjia.png",
        },
        {
          name: "kaoqin",
          content: "我的考勤",
          picsrc: "../../../images/my/kaoqin.png",
        },
        {
          name: "chuchai",
          content: "出差",
          picsrc: "../../../images/my/chuchai.png",
        },
        {
          name: "jiaban",
          content: "加班",
          picsrc: "../../../images/my/jiaban.png",
        },
        {
          name: "waichu",
          content: "外出",
          picsrc: "../../../images/my/waichu.png",
        },
        {
          name: "buka",
          content: "补卡",
          picsrc: "../../../images/my/buka.png",
        },
      ],
      column:4
    };
  },
  mounted() {},
  methods: {
    handleGoToPath(name) {
      console.log(name);
      if (name) {
        this.$router.push(name);
      }
    },
    message(){
      this.$router.push({path:"/message"})
    },
    wineTesting(){
      this.$router.push({path:"/winetesting"})
    },
    achievement(){
      this.$router.push({path:"/mydone"})
    }
  },
  components: {
    // HeaderTop
    HoverTab,
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../common/stylus/mixin.styl"
  .wrap{
    background #f5f5f5
    overflow hidden
    height 100vh
    margin-bottom: 16px
  }
  .header{
    height 190px;
    width 100%
    float left
    // overflow hidden
    background: linear-gradient(to right,#29DFD9,#2998DF);
    position relative
    .header_nav {
      margin-top 20px
      width 100%
      line-height 40px
      span{
        font-size 18px
        color #FFFFFF
        text-align center
        margin-left 170px
        margin-right 140px
      }
      img{
        width 18px
        height 19px
        vertical-align middle
      }
    }
    .header_my{
      margin-top 26px
      margin-left 15px
      display flex
      line-height 28px
      .my_left{
        img{
          width 60px
          height 60px
          margin-right 10px
        }
      }
      .my_right{
        color #FFF
        .m_name{
          font-size 15.5px
          // font-weight 530
        }
        .m_in{
          font-size 12.5px
        }
      }
    }
    .header_info{
      width 345px
      text-align center
      position absolute
      top 160px
      left 15px
      background #FFF
      border-radius 5px
      display flex
      justify-content space-around
      .info{
          line-height 28px
        .num{
          color #666
          font-size 11px
        }
        .info_content{
          color #333
          font-weight bold
          font-size 13px
        }
      }
    }
  }
.content{
    clear both
    background red
    height 174px
    margin-top 230px
    margin-bottom 9.5px
    color #333
    font-size 13.5px
    text-align center
    display flex
    justify-content space-around
    flex-wrap wrap
    background #fff
    border-radius 5px
    width 345px
    margin-left 15px
    line-height 18px
  }
  .footer{
    width 345px
    margin-left 15px
    .f_main{
      height 50px
      background #fff
      border-radius 5px
      display flex
      justify-content space-between
      line-height 50px
      margin-bottom 5px
      color #333
      fon-size 14px
      span{
        margin 0 0 0 10px
      }
			.icon{
				width 19.5px
				height 22px
				margin 0 0 0 15px
			}
      img{
        width 8px
        height 14px
        vertical-align middle
        margin 18px 13.5px 0 0
      }
    }
  }
</style>
